<script setup>
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { request } from '../utils';
import { Toast } from 'vant';
import { useUserStore } from '@/store/user'
const form =reactive({
    username:'',
    password:''
})

const myform = ref(null)
const router = useRouter()
//vuex状态管理
const userStore = useUserStore(); 


//登录按钮
const onSubmit = async (values) => {
    console.log('submit', values);
    const data = await userStore.login(form)
    if(data.code === 200){
        Toast.success('登录成功');
        setTimeout(()=>{
            Toast.clear('false')
            router.push('menu')
        },500)
        
    }else{
        Toast.fail('用户名或密码错误!');
    }
}

//注册按钮
const regItem = function(){
    router.push('reg')
}

</script>

<template>
<div>
    <h6>银豹账户登录</h6>
    <van-form @submit="onSubmit" ref="myform">
        <van-cell-group inset>
        <van-field
            v-model="form.username"
            name="用户名"
            placeholder="账户名称/手机号码"
            :rules="[{ required: true, message: '请填写用户名' }]"
            style="border-bottom:1px solid #ccc"
        />
        <van-field
            v-model="form.password"
            type="password"
            name="密码"
            placeholder="输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            style="border-bottom:1px solid #ccc"
        />
    </van-cell-group>
    <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
        登录
        </van-button>
    </div>
    </van-form>
    <div >
        <van-button type="default" class="free" @click="regItem">免费注册</van-button>
    </div>
</div>
</template>

<style scoped>
.free{
    position: relative;
    top: -15px;
    font-size: 15px;
    padding-left: 20px;
    color: #c8c9cc;
    border: none;
}
</style>